<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>外出签到管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="public/static/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="public/static/ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <style>
        /*web background*/
        .container {
            display: table;
            height: 100%;
        }

        .row {
            display: table-cell;
            vertical-align: middle;
        }

        /* centered columns styles */
        .row-centered {
            text-align: center;
        }

        .col-centered {
            display: inline-block;
            float: none;
            text-align: left;
            margin-left: 50%;
        }

        .bodycss{
            background-color: rgba(255,255,255,0.4) !important;
            position:absolute;
            top:0;
            margin-left: 37.5%;
            margin-top: 13%;
            -moz-box-shadow:0px 0px 5px #808080;
            -webkit-box-shadow:0px 0px 5px #808080;
            box-shadow:0px 0px 5px #808080;
            border-radius: 10px;
            width: 390px;
            color: aliceblue;
            box-shadow: 0px 0px 20px 0px #819e99;
        }
    </style>


    <![endif]-->
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="skin-blue sidebar-mini"
      style="height: auto; min-height: 80%; background-image:url(public/bgpic.jpg); background-size: 100%; overflow: hidden">

<DIV class="large-header" id="large-header">
    <CANVAS id="demo-canvas"></CANVAS>
    <div class="well col-md-3 col-centered " style=" background-color: rgba(255,255,255,0.4) !important;
            position:absolute;
            top:0;
            margin-left: 37.5%;
            margin-top: 13%;
            -moz-box-shadow:0px 0px 5px #808080;
            -webkit-box-shadow:0px 0px 5px #808080;
            box-shadow:0px 0px 5px #808080;
            border-radius: 10px;
            width: 390px;
            color: aliceblue;
            box-shadow: 0px 0px 20px 0px #819e99;
            ">
        <h2>欢迎登录</h2>
        <br/>
        <form:form action="/login" method="post" role="form">

            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-btn">
                        <span class="btn btn-warning dropdown-toggle id=" sizing-addon1"><i
                            class="glyphicon glyphicon-user"
                            aria-hidden="true"></i></span>
                    </div>
                    <input type="text" name="username" class="form-control"  style="border:0px;background-color:rgba(255,255,255,0.5) !important" placeholder="请输入工号">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-btn">
                        <span class="btn btn-warning dropdown-toggle id=" sizing-addon1"><i
                            class="glyphicon glyphicon-lock"></i></span>
                    </div>
                    <input type="text" name="pwd" class="form-control" style="border:0px;background-color:rgba(255,255,255,0.5) !important" placeholder="请输入密码">
                </div>
            </div>


            <br/>
            <button type="button" id="submit" class="btn btn-block btn-success btn-lg">登录</button>

        </form:form>
    </div>

</DIV>

<SCRIPT src="dist/js/TweenLite.min.js"></SCRIPT>
<SCRIPT src="dist/js/EasePack.min.js"></SCRIPT>
<SCRIPT src="dist/js/demo-1.js"></SCRIPT>


<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- layer -->
<script src="public/static/layer/layer.js"></script>

<script>

    $("#submit").on('click', function () {
        var username = $('input[name="username"]').val();
        var pwd = $('input[name="pwd"]').val();
        if (username.length < 1 || pwd.length < 1) {
            layer.msg('工号或密码不能为空！', {icon: 2, time: 1500});
            return false;
        }
        localStorage.setItem('role', username)
        location.href = "index.html";
    });


</script>

</body>
</html>
